<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('网站后台首页')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/back/back-see-all-question.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="~{/common/common :: common_header_back('','全部试题')}"></header>

<article>
    <!-- 侧边栏部分 -->
    <nav th:include="~{/common/common :: common_left_nav('','')}"></nav>
    <!-- 显示内容的部分 -->
    <div class="context-wrap">
        <!-- 按照指定的内容搜索 -->
        <div class="demoTable">
            请输入关键词汇：
            <div class="layui-inline">
                <input class="layui-input" id="search" autocomplete="off">
            </div>
            <button class="layui-btn" id="search-button" data-type="reload">搜索</button>
        </div>
        <!-- 数据表格 -->
        <table class="layui-hide" id="question-table" lay-filter="question-table"></table>
        <!-- 头部工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add-question">添加试题</button>

                <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="subject-one">科目一试题</button>
                <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="subject-four">科目四试题</button>
            </div>

        </script>
        <!-- 操作按钮 -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail">查看详细</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
        <!-- 设置为考试试题 -->
        <script type="text/html" id="test-question">
            <!-- 这里的 checked 的状态只是演示 -->
            <input type="checkbox" name="questionTest" value="{{d.questionId}}" title="考试题" lay-filter="testQuestion"
                   {{d.questionTest ? 'checked' : '' }}>
        </script>
    </div>
</article>

</body>
</html>
<script>


    layui.use(['element', 'table'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.$;
        let layer = layui.layer;
        table.render({
            elem: '#question-table'
            , url: '/question/getAllQuestion'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '用户数据表'
            , cols: [
                [
                    {title: '序号', type: "numbers", unresize: false, width: 80}
                    , {field: 'questionTopic', title: '问题题目', width: 280}
                    , {field: 'questionA', title: '选项A', width: 135,edit:'text'}
                    , {field: 'questionB', title: '选项B', width: 135,edit:'text'}
                    , {field: 'questionC', title: '选项C', width: 135,edit:'text'}
                    , {field: 'questionD', title: '选项D', width: 135,edit:'text'}
                    , {field: 'questionAnswer', title: '答案', width: 80}
                    , {field: 'questionTest', title: '考试试题', width: 125, templet: '#test-question', unresize: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]
            ]
            , id: 'questionTable'
            , limits: [2, 4, 6, 8, 10]
            , page: true
        });

        //数据表格头部的按钮事件
        table.on('toolbar(question-table)', function (obj) {
            switch (obj.event) {
                case 'add-question':
                    window.location.href = "/page/backAddQuestion";
                    break;

                case 'delete-question':
                    layer.alert('删除试题');
                    break;
                case 'subject-one':
                    //执行重载
                    table.reload('questionTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            classify: 1,
                        }
                    });
                    break;
                case 'subject-four':
                    //执行重载
                    table.reload('questionTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            classify: 4,
                        }
                    });
                    break;
            }
        });
        table.on('edit(question-table)',function (obj) {
            console.log(obj);
            var data=obj.data;
            $.ajax({
                url: '/question/setQuestion',
                data: {
                    questionId: data.questionId,
                    field:obj.field,
                    question:obj.value

                },
                dataType: 'JSON',
                success: function (res) {
                    if (res == 1) {
                        layer.msg("修改成功");
                    }else{
                        layer.msg("修改失败");
                    }
                }
            }, JSON)

        });
        //设置考试试题的操作
        form.on('checkbox(testQuestion)', function (obj) {
            $.post("/question/setQuestionTest", {
                questionId: this.value,
                questionTest: obj.elem.checked
            }, function (res) {
                if (res == 1) {
                    layer.tips("设置成功", obj.othis);
                } else {
                    layer.tips("设置失败", obj.othis);
                }
            })
        });

        //搜索之后数据表格重载
        $("#search-button").on("click", function () {
            //执行重载
            table.reload('questionTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    search: $("#search").val(),
                }
            });
            question - table
        });


        //监听行工具事件
        table.on('tool(question-table)', function (obj) {
            let data = obj.data;

            //删除指定行数据
            if (obj.event == 'delete') {
                $.ajax({
                    url: '/question/deleteQuestion',
                    data: {
                        questionId: data.questionId,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res == 0) {
                            layer.msg("删除成功");
                        }
                        //执行重载
                        table.reload('questionTable', {
                            page: {
                                curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
                            }
                        });
                    }
                }, JSON)
            }
            if (obj.event == 'edit') {

                layer.prompt({
                    formType: 2,
                    value: data.questionTopic,
                    title: '题目修改'
                }, function (value, index) {

                    var daan = $('#da').val()
                    layer.close(index);
                    console.log(obj)
                    $.ajax({
                        url: '/question/updateQuestion',
                        data: {
                            questionId: data.questionId,
                            questionTopic: value,
                            questionAnswer: daan,
                            questionType:data.questionType
                        },
                        dataType: 'JSON',
                        success: function (res) {
                            if (res == 0) {
                                layer.msg("修改成功", {icon: 6});
                            }
                            if (res == 2) {
                                layer.msg("答案输入错误", {icon: 5});
                            }
                            if (res == 1) {
                                layer.msg("修改失败", {icon: 5});
                            }if (res == 3) {
                                layer.msg("修改失败,多选题答案设置错误！", {icon: 5});
                            }
                            //执行重载
                            table.reload('questionTable', {
                                page: {
                                    curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
                                }
                            });
                        }
                    }, JSON)

                });


                $(".layui-layer-content").append("<br/><input type=\"text\" id= \"da\" class=\"layui-input\" placeholder=\"答案\"/>")
            }
            //查看详细数据
            if (obj.event == 'detail') {
                layer.open({
                    type: 1,
                    area: '800px',
                    title: ['详细信息', 'text-align:center;'],
                    moveOut: true,
                    shadeClose: true,
                    content: `<div class="layui-card">
                        <div class="layui-card-body">
                          <table class="layui-table">
                            <colgroup>
                              <col width="50">
                              <col width="200">
                            </colgroup>
                            <tbody>
                               <tr>
                                <td>所属科目</td>
                                <td>${data.questionClassify == 1 ? '科目一' : '科目四'}</td>
                               </tr>
                               <tr>
                                <td>问题题目</td>
                                <td>${data.questionTopic}</td>
                               </tr>
                               <tr>
                                <td>选项A内容</td>
                                <td>${data.questionA}</td>
                               </tr>
                               <tr>
                                <td>选项B内容</td>
                                <td>${data.questionB}</td>
                               </tr>
                               <tr style="${data.questionC == '' ? 'display:none;' : (data.questionC == null ? 'display:none;' : '')}">
                                <td>选项C内容</td>
                                <td>${data.questionC}</td>
                               </tr>
                               <tr style="${data.questionD == '' ? 'display:none;' : (data.questionD == null ? 'display:none;' : '')}">
                                <td>选项D内容</td>
                                <td>${data.questionD}</td>
                               </tr>
                               <tr style="${data.questionE == '' ? 'display:none;' : (data.questionE == null ? 'display:none;' : '')}">
                                <td>选项E内容</td>
                                <td>${data.questionE}</td>
                               </tr>
                               <tr style="${data.questionF == '' ? 'display:none;' : (data.questionF == null ? 'display:none;' : '')}">
                                <td>选项F内容</td>
                                <td>${data.questionF}</td>
                               </tr>
                               <tr style="${data.questionG == '' ? 'display:none;' : (data.questionG == null ? 'display:none;' : '')}">
                                <td>选项G内容</td>
                                <td>${data.questionG}</td>
                               </tr>
                               <tr>
                                <td>问题答案</td>
                                <td>${data.questionAnswer}</td>
                               </tr>
                               <tr>
                                <td>问题解释</td>
                                <td>${data.questionExplain}</td>
                               </tr>
                               <tr style="${data.questionImage == '' ? 'display:none;' : (data.questionImage == null ? 'display:none;' : '')}">
                                <td>问题照片</td>
                                <td><img src="${data.questionImage}" alt=""></td>
                               </tr>
                               <tr>
                                <td>添加时间</td>
                                <td>${data.created}</td>
                               </tr>
                               <tr>
                                <td>最后一次修改时间</td>
                                <td>${data.modified}</td>
                               </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>`,
                });
            }
        });
    });

</script>